<template>
  <div class="wrapper">
    <!-- <var-app-bar class="mt-2 shadow-none" title="上课记录..." /> -->
    <h5 class="my-2 py-2 text-neutral-300">上课记录</h5>
    <var-table class="my-2 shadow-none tableCen">
      <thead>
        <tr>
          <th>序号</th>
          <th>日期</th>
          <th>出题总数</th>
          <th>完成总数</th>
          <th>错误总数</th>
          <th>正确率</th>
        </tr>
      </thead>
      <tbody>
        <tr
          v-for="(item, index) in list"
          :key="index"
          @click="toHisReslist(item)"
        >
          <td>{{ index + 1 }}</td>
          <td>{{ item.schooltime }}</td>
          <td>{{ item.titleCn }}</td>
          <td>{{ item.completeCn }}</td>
          <td>{{ item.wrongCn }}</td>
          <td>{{ item.rightRate }}%</td>
        </tr>
      </tbody>
    </var-table>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { postData } from "@/utils/api";
import { loginStore } from "@/store/user";
import { useRouter } from "vue-router";
const store = loginStore();
const cusRouter = useRouter();
const list = ref([]);
let user = "";
if (store.getUserInfo?.userInfo == undefined) {
  user = store.getUserInfo;
} else {
  user = JSON.parse(store.getUserInfo?.userInfo);
}
onMounted(() => {
  getLogDate();
});
const getLogDate = async () => {
  await postData("config/test/getTotalLog", {
    classroomId: user.classRoomId,
    studentId: user.id,
    schooltime: history.state.schooltime,
  }).then((res) => {
    list.value = res.data.data;
  });
};

const toHisReslist = (val) => {
  cusRouter.push({
    name: "HisResult",
    state: {
      schooltime: val.schooltime,
      totalId: val.totalId,
    },
  });
};
</script>

<style scoped>
.tableCen thead th {
  background-color: #3a7afe;
  color: #fff;
}
</style>
